<template>
  <div>
    <div class="mapMiddle" v-if="!attributeList.customAttr">
      <div class="content">
        <div class="mapClose" @click="closePanel"></div>
        <div class="mapTitle">
          {{
            attributeList.type === 0
              ? '居民区检查点'
              : attributeList.type === 1
              ? '单位检查点'
              : '沿街商铺检查点'
          }}
        </div>
        <div class="checkPoint">
          <div class="contentItem">
            <div class="contentLeft">检查点名称:</div>
            <div class="contentRight">{{ attributeList.name }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属街道:</div>
            <div class="contentRight">{{ attributeList.streetName }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">地址:</div>
            <div class="contentRight">
              {{ attributeList.site ? attributeList.site : '-----' }}
            </div>
          </div>
          <div class="contentItem" v-if="attributeList.cause">
            <div class="contentLeft">检查详情:</div>
            <div class="contentRight contentcause">
              {{ attributeList.cause ? attributeList.cause : '-----' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="mapMiddleserial">
      <div class="content">
        <div class="mapClose" @click="closePanel"></div>
        <div class="mapTitle">
          {{
            attributeList.type === 0
              ? '居民区检查点'
              : attributeList.type === 1
              ? '单位检查点'
              : '沿街商铺检查点'
          }}
        </div>
        <div class="checkPoint">
          <div class="contentItem">
            <div class="contentLeft">检查点名称:</div>
            <div class="contentRight">{{ attributeList.name }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">所属街道:</div>
            <div class="contentRight">{{ attributeList.streetName }}</div>
          </div>
          <div class="contentItem">
            <div class="contentLeft">地址:</div>
            <div class="contentRight">
              {{ attributeList.site ? attributeList.site : '-----' }}
            </div>
          </div>
          <div class="contentItem" v-if="attributeList.cause">
            <div class="contentLeft">检查详情:</div>
            <div class="contentRight contentcause">
              {{ attributeList.cause ? attributeList.cause : '-----' }}
            </div>
          </div>
          <div class="imageContainer" v-if="imageList.length > 0">
            <el-carousel :interval="4000" height="250px">
              <el-carousel-item v-for="(item, index) in imageList" :key="index">
                <el-image style="width: 500px; height: 250px" :src="item" fit="cover" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="imageContainer" v-if="imageList.length === 0">
            <div class="noImage">暂无图片</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { clearpanelAll } from '@/utils/map'
import { ElCarousel, ElImage, ElCarouselItem } from 'element-plus'
let imageList = ref([])
const props = defineProps({
  attributeList: Object
})
const ENV = import.meta.env
onMounted(() => {
  initImage()
})
const closePanel = () => {
  clearpanelAll()
}
const initImage = () => {
  console.log(props.attributeList.imageOne, 'hahhah')
  imageList.value = []
  if (props.attributeList.imageOne) {
    imageList.value.push(
      `${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${props.attributeList.imageOne}`
    )
  }
  if (props.attributeList.imageTwo) {
    imageList.value.push(
      `${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${props.attributeList.imageTwo}`
    )
  }
  if (props.attributeList.imageThree) {
    imageList.value.push(
      `${ENV.VITE_APP_API_URL}/shljJzqGl/getFile?imgPath=${props.attributeList.imageThree}`
    )
  }
}
</script>
<style scoped lang="scss">
.mapTitle {
  font-size: 30px;
  color: #48cbe8;
  height: 75px;
  display: flex;
  align-items: center;
}
.contentItem {
  display: flex;
  align-items: center;
  padding: 10px 0;
  .contentLeft {
    // font-size: 35px;
    // width: 200px;
    margin: 0 20px 0 0;
    color: #48cbe8;
  }
  .contentRight {
    flex: 1;
  }
}
.contentcause {
  height: 120px;
  overflow-y: auto;
}
.mapMiddle {
  width: 547px;
  height: 490px;
  background: url('@/assets/images/map/mapBack.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  box-sizing: border-box;
  top: -290px;
  left: 40px;
  &::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -40px;
    width: 76px;
    height: 131px;
    background: url('@/assets/images/map/line.png') no-repeat;
    background-size: 100% 100%;
  }
  .content {
    position: relative;
    font-size: 30px;
    padding: 0 50px;
    .mapTitle {
      height: 60px;
      margin-top: 50px;
    }
    .checkPoint {
      height: 550px;
      box-sizing: border-box;
      overflow-y: scroll;
    }
    .mapClose {
      position: absolute;
      right: 30px;
      top: 12px;
      width: 50px;
      height: 50px;
      background: url('@/assets/images/map/close.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}
.mapMiddleserial {
  width: 547px;
  height: 700px;
  background: url('@/assets/images/map/mapBack.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  box-sizing: border-box;
  top: -490px;
  left: 40px;
  &::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -40px;
    width: 76px;
    height: 131px;
    background: url('@/assets/images/map/line.png') no-repeat;
    background-size: 100% 100%;
  }
  .imageContainer {
    margin-top: 10px;
    height: 400px;
    .noImage {
      display: flex;
      justify-content: center;
    }
  }
  position: relative;
  font-size: 30px;
  padding: 0 50px;
  .checkPoint {
    height: 550px;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .mapClose {
    position: absolute;
    right: 30px;
    top: 12px;
    width: 50px;
    height: 50px;
    background: url('@/assets/images/map/close.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
}
</style>
